Overview

As you prepare to develop a food ordering app for the Little Lemon restaurant, you first need to create a wireframe for your project. Think of a wireframe like an architect's blueprint - it is a plan and outline of a digital product. Its purpose is to create a basic structure for each screen design, before considering specifics such as branding colors and images. A wireframe also provides a way of communicating ideas quickly, which can be polished off later. The focus is placed on the user experience and what they need to accomplish a task. Although wireframes can be sketched out by hand, you will use Figma to draw the wireframe in this exercise. Figma is a useful tool in app development. It makes it possible to share the wireframe with other team members, allowing them to comment on the same document.

Scenario

The Little Lemon restaurant has faced difficulties with online ordering for delivery and has decided to create an Android app to resolve this issue. In this exercise, you will create a wireframe of the home screen for the project.

Instructions

Step 1: Consider client requirements

Start by considering Little Lemon’s requirements. These will become content blocks that will give you a skeleton of what content will appear where in the wireframe. The following are required:

• Information about Little Lemon

• Descriptions and photos of dishes

• Navigation bar

• Search bar

• Menu categories (Starters, Mains, Desserts and Drinks).

With the outline of the content required, you can now start to create the wireframe.

Step 2: Create the frame and grid

• In Figma, open the frame menu and select Frame .

• Select an Android Large frame from the frames panel located at the right side of the screen.

• Add a 4-column layout grid to the frame with a margin of 25 and a gutter of 20.

Note: For a recap on creating grids, please refer to the Principles of UX and UI design course.

Step 3: Construct content blocks

• On the first frame, you need content blocks to contain the following:

  • Navigation (also known as Header)

  • The Hero section, which showcases the Little Lemon restaurant

  • A search bar

  • Menu categories (Starters, Mains, Desserts and Drinks)

  • The Menu section

• Construct these content blocks using rectangles and then name the appropriate blocks:

Step 4: Set up a guide

• Move the content blocks out of the frame.

• Select the rectangles and make them narrower. This will give you a rough guide of the content blocks to use as a reference when placing elements within the frame.

Step 5: Add the Navigation bar

The Navigation bar requires the following elements: the Little Lemon logo and a link to the user’s profile account.

• For the logo, draw a rectangle and draw diagonal lines through it. This is a conventional way to denote a placeholder on a wire frame if an image is not readily available.

• Repeat this step for the user profile.

Step 6: Add the Hero section

• The Hero sections should include: the Little Lemon name, the location of the restaurant, a brief description of the restaurant's food style, a photograph and a dish search function.

• Add a background shown in grey below and populate the block with the required parts.

Step 7: Add the Menu breakdown block

• To highlight that this is a food delivery app, add the heading Order for delivery in the Menu breakdown block.

• Because Mario and Adrian want their users to have the ability to filter the menu categories you need to add menu category filter buttons below this heading.

Step 8: Add the Menu items block

• This section requires a title (name of the dish), a description, the price and an image of each dish.

• Make sure to note that when a dish is clicked the user will be taken to another screen and that this section is scrollable vertically in order for users to view further items.

And that completes the wireframe for the home screen of your project. Notice that no color, fonts or images are included in the wireframe. All that is important here is the content, layout and functionality:

Conclusion

Now that you have covered the basics of wireframing and wireframed the first screen of your app, you can continue to wireframe and design your solution for the rest of the food ordering app.